<template>
  <el-row class="RangeDrawer">
    <commonDrawer
      :title="customerName"
      :drawer="drawer"
      :size="1150"
      :isShowMoreBtn="false"
      @closeDraw="closeDraw"
    >
      <template slot="column">
        <div class="range-area">
          <CustomerInfo
            ref="CustomerInfo"
            :customerId="id"
            :owner="ownerName"
            :detailData="detailData"
            :busCategory="busCategory"
            @updateOwner="updateOwner"
            @updatePerson="updatePerson"
            @updateAddr="updateAddr"
            @updateLog="updateLog"
            @updateTrackList="updateTrackList"
          ></CustomerInfo>
          <el-tabs
            v-model="activeName"
            @tab-click="handleTabClick"
            style="margin-top: 10px"
          >
            <el-tab-pane label="客户详情" name="first">
              <div class="content">
                <CustomerEdit
                  ref="CustomerEdit"
                  style="width: 400px; flex-shrink: 0"
                  :id="id"
                  @updateLog="updateLog"
                ></CustomerEdit>
                <div class="line"></div>
                <CustomerRecord
                  ref="CustomerRecord"
                  style="flex: 1"
                  :customerId="id"
                  :busCategory="busCategory"
                ></CustomerRecord>
              </div>
            </el-tab-pane>
            <el-tab-pane label="联系人" name="second">
              <div class="content">
                <ContactPerson
                  ref="ContactPerson"
                  :customerId="id"
                ></ContactPerson>
              </div>
            </el-tab-pane>
            <el-tab-pane label="联系地址" name="third">
              <div class="content">
                <ContactAdress
                  ref="ContactAdress"
                  :customerId="id"
                ></ContactAdress>
              </div>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="fourth">
              <div class="content">
                <OperateRecord
                  ref="OperateRecord"
                  :customerId="id"
                ></OperateRecord>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
/**
 * 客户详情组件
 */
import { Component, Vue, Ref } from 'vue-property-decorator'
import commonDrawer from '@/components/globalTool/resizeDrawer/drawer.vue'
import { commonAction } from '@/utils/common'
import CustomerForm from '../components/customerForm.vue'
import CustomerDistribute from '../components/customerDistribute.vue'
import CustomerInfo from '../components/customerOption.vue'
import CustomerEdit from '../components/customerEdit.vue'
import CustomerRecord from '../components/customerRecord.vue'
import OperateRecord from '../components/operateRecord.vue'
import ContactPerson from '../components/contactPerson.vue'
import ContactAdress from '../components/contactAdress.vue'
import { CommonModule } from '@/store/modules/common'
import { TagModule } from '@/store/modules/tag'
@Component({
  name: 'CustomerDetail',
  components: {
    commonDrawer,
    CustomerForm,
    CustomerDistribute,
    CustomerInfo,
    CustomerEdit,
    CustomerRecord,
    OperateRecord,
    ContactPerson,
    ContactAdress
  }
})
export default class CustomerDetail extends Vue {
  [x: string]: any
  @Ref() private readonly CustomerEdit
  @Ref() private readonly ContactPerson
  @Ref() private readonly ContactAdress
  @Ref() private readonly OperateRecord
  @Ref() private readonly CustomerRecord
  private drawer: boolean = false
  private customerName: string = '用户名称'
  private ownerName: string = ''
  private activeName = 'first'
  private detailData: any = {}
  private id: any = ''
  private busCategory: any = []

  private getName (id) {
    const names = (CommonModule as any).publicCache.userListObj[id]
    if (names) {
      return `${names.agentName} 【${names.agentNumber}】`
    }
    return ''
  }

  private updateOwner (owner) {
    this.ownerName = this.getName(owner)
  }

  private async getDetailData (id: string) {
    const params = { url: `/server-crm/action/customer/${id}`, method: 'GET' }
    const res = await commonAction(params)
    if (res.success && res.data) {
      this.detailData = res.data
      this.customerName = res.data.name ? res.data.name : '--'
      this.ownerName = this.getName(res.data.owner)
    }
  }

  private async openDraw (data: any = []) {
    this.drawer = true
    this.id = data._id
    await this.getDetailData(data._id)
    await this.$getCache('/server-crm/action/customer/common/panel/detail', ['customerDetailConfig'], false, false, false, 'GET', false, 'data.fields')
    this.$nextTick(() => {
      this.CustomerEdit.initData(this.detailData)
      this.CustomerRecord.clearSearchData() // 清空客户动态搜索条件
      this.CustomerRecord.searchDy() // 客户动态
    })
  }

  private handleTabClick (tab: any) { // 点击操作日志
    if (tab.name === 'fourth') {
      this.OperateRecord.quickQuery() // 清空操作日志数据
    } else if (tab.name === 'third') {
      this.ContactAdress.getData()
    } else if (tab.name === 'second') {
      this.ContactPerson.getData()
    }
  }

  private updatePerson () {
    this.ContactPerson.getData()
    this.OperateRecord.quickQuery() // 清空操作日志数据
  }

  private updateAddr () {
    this.ContactAdress.getData()
    this.OperateRecord.quickQuery() // 清空操作日志数据
  }

  private updateLog () {
    this.OperateRecord.quickQuery() // 清空操作日志数据
  }

  private updateTrackList () {
    this.CustomerRecord.searchDy() // 客户动态
  }

  private closeDraw () {
    this.drawer = false
    this.activeName = 'first'
    this.$nextTick(() => { // 关闭抽屉 清空操作日志搜索项
      if (this.OperateRecord) {
        this.OperateRecord.clearSearchForm()
      }
    })
  }

  private getCategory () {
    commonAction({
      url: '/server-work/action/workOrderModel/getCategory/filter',
      method: 'post',
      data: { filterPermission: 1 }
    }).then(res => {
      if (res.success) {
        this.busCategory = res.data || []
      }
    })
  }

  private mounted () {
    this.getCategory() // 工单模型
    this.$getCache('/server-crm/action/customer/common/fields', ['customerAllFields'], false, false, false, 'GET', false, 'data') // 缓存所有字段
    this.$getCache('/im-center/action/webchat/channelCache', ['channelList'], true) // 渠道接入号
    this.$getCache('/im-center/action/webchat/cache', ['sessionTags'], true, true, true, 'POST', true) // 会话标签
    TagModule.getTagTree() // 通话标签
  }
}
</script>

<style lang="stylus" scoped>
.RangeDrawer
  /deep/ .el-scrollbar__wrap
    overflow-x hidden
  /deep/ .el-tabs__content
    position absolute
    height calc(100% - 90px)
    width 100%
  /deep/ .el-tab-pane
    height 100%
  .range-area
    margin-top -10px
    position absolute
    height calc(100% - 90px)
    width calc(100% - 48px)
    .content
      height 100%
      overflow hidden
      display flex
      .line
        width 1px
        margin 0px 10px
        height 100%
        background #E7E9ED
</style>
